<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" th:href="@{/assets/img/apple-icon.png}"/>
    <link rel="icon" type="image/png" th:href="@{/assets/img/favicon.png}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Now Ui Kit by Creative Tim</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--Fonts and icons-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
    <!--CSS Files -->
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/assets/css/now-ui-kit.css}" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link th:href="@{/assets/css/demo.css}" rel="stylesheet"/>
</head>


<body class="landing-page">
<div th:replace="nav::nav"></div>
<!--<div class="wrapper">-->

    <!--<div th:replace="footer::footer"></div>-->

<!--</div>-->

<div class="wrapper">
    <div class="page-header clear-filter" filter-color="orange">
    <div class="page-header-image" data-parallax="true" style="background-image: url('./assets/img/header.jpg');">
    </div>
    <div class="container">
        <div class="content-center brand">
            <img class="n-logo" src="./assets/img/now-logo.png" alt="">
            <h1 class="h1-seo">Now UI Kit.</h1>
            <h3>A beautiful Bootstrap 4 UI kit. Yours free.</h3>
        </div>

    </div>
</div>
    <div class="main">
        <div class="section section-team text-center ">
            <div class="container">
                <h2 class="title">我们的优势</h2>
                <div class="team">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="team-player">
                                <img th:src="@{/assets/img/eva.jpg}" alt="Thumbnail Image" class="rounded-circle  img-raised">
                                <h4 class="title">客户关怀</h4>
                                <p class="category text-primary">Model</p>
                                <p class="description">阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标
                                </p>

                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="team-player">
                                <img th:src="@{/assets/img/ryan.jpg}" alt="Thumbnail Image" class="rounded-circle img-raised">
                                <h4 class="title">急速发货</h4>
                                <p class="category text-primary">Designer</p>
                                <p class="description">阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="team-player">
                                <img th:src="@{/assets/img/ryan.jpg}" alt="Thumbnail Image" class="rounded-circle img-raised">
                                <h4 class="title">Ryan Tompson</h4>
                                <p class="category text-primary">Designer</p>
                                <p class="description">阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="team-player">
                                <img th:src="@{/assets/img/eva.jpg}" alt="Thumbnail Image" class="rounded-circle img-raised">
                                <h4 class="title">快速响应</h4>
                                <p class="category text-primary">Fashion</p>
                                <p class="description">阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section section-nucleo-icons " data-background-color="orange">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-12">
                        <h2 class="title">关于我们</h2>
                        <h5 class="description">
                            UIKit为您提供了全面的HTML、CSS及JS组件，它们使用简单，容易定制和扩展。UIKit为您提供了全面的HTML、CSS及JS组件，它们使用简单，容易定制和扩展。UIKit为您提供了全面的HTML、CSS及JS组件。UIKit为您提供了全面的HTML、CSS及JS组件。UIKit为您提供了全面的HTML、CSS及JS组件
                        </h5>
                        <!--<div class="nucleo-container">
                            <img src="./assets/img/sf.svg" alt="">
                        </div>-->
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="icons-container">
                            <i class="now-ui-icons ui-1_send"></i>
                            <i class="now-ui-icons ui-2_like"></i>
                            <i class="now-ui-icons transportation_air-baloon"></i>
                            <i class="now-ui-icons text_bold"></i>
                            <i class="now-ui-icons tech_headphones"></i>
                            <i class="now-ui-icons emoticons_satisfied"></i>
                            <i class="now-ui-icons shopping_cart-simple"></i>
                            <i class="now-ui-icons objects_spaceship"></i>
                            <i class="now-ui-icons media-2_note-03"></i>
                            <i class="now-ui-icons ui-2_favourite-28"></i>
                            <i class="now-ui-icons design_palette"></i>
                            <i class="now-ui-icons clothes_tie-bow"></i>
                            <i class="now-ui-icons location_pin"></i>
                            <i class="now-ui-icons objects_key-25"></i>
                            <i class="now-ui-icons travel_istanbul"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="container text-center">
                <div class="row justify-content-md-center">
                    <div class="col-md-12 col-lg-8">
                        <h2 class="title">Completed with examples</h2>
                        <h5 class="description">The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful
                            Bootstrap 4 ui kit.</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="section section-download" id="#download-section" data-background-color="orange">
            <div class="container">
                <div class="row justify-content-md-center">
                    <div class="text-center col-md-12 col-lg-8">
                        <h3 class="title">谢谢您的选择</h3>
                        <h5 class="description">我们将为您提供最优质的服务</h5>
                    </div>
                    <div class="text-center col-md-12 col-lg-8">
                        <a href="https://www.creative-tim.com/product/now-ui-kit" class="btn btn-primary btn-lg btn-round" role="button">
                            注册
                        </a>
                        <a href="https://www.invisionapp.com/now" target="_blank" class="btn btn-primary btn-lg btn-simple btn-round" role="button">
                            登录
                        </a>
                    </div>
                </div>
                <br>
                <br>
                <div class="row justify-content-md-center sharing-area text-center">
                    <div class="text-center col-md-12 col-lg-8">
                        <h3>Thank you for supporting us!</h3>
                    </div>
                    <div class="text-center col-md-12 col-lg-8">
                        <a target="_blank" href="#" class="btn btn-neutral btn-icon btn-twitter" rel="tooltip" title="关注微博">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a target="_blank" href="#" class="btn btn-neutral btn-icon btn-facebook" rel="tooltip" title="关注微信">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a target="_blank" href="#" class="btn btn-neutral btn-icon btn-facebook" rel="tooltip" title="发起聊天">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="footer::footer"></div>
</div>
</body>
<!--   Core JS Files   -->
<script th:src="@{/assets/js/core/jquery.3.2.1.min.js}" type="text/javascript"></script>
<script th:src="@{/assets/js/core/tether.min.js}" type="text/javascript"></script>
<script th:src="@{/assets/js/core/bootstrap.min.js}" type="text/javascript"></script>
<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script th:src="@{/assets/js/plugins/bootstrap-switch.js}"></script>
<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script th:src="@{/assets/js/plugins/nouislider.min.js}" type="text/javascript"></script>
<!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script th:src="@{/assets/js/plugins/bootstrap-datepicker.js}" type="text/javascript"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script th:src="@{/assets/js/now-ui-kit.js}" type="text/javascript"></script>
<script type="text/javascript">
    function scrollToDownload() {
        if ($('.section-download').length != 0) {
            $("html, body").animate({
                scrollTop: $('.section-download').offset().top
            }, 1000);
        }
    }
</script>
</html>